<!--待审批页面-->
<template>
	<view class="approval">
		<view class="top">
			<!--end 顶部-->
			<!--头部-->
			<view class="header">
				<view class="text-left" v-if="orderStatus == 0">待审批</view>
				<view class="text-left" v-if="orderStatus == 2">已审批</view>
				<view class="text-left" v-if="orderStatus == 4">已放款</view>
				<view class="text-left" v-if="orderStatus == 6">中止</view>
				<view class="text-right" @click="newOrderBtn">录入新单</view>
			</view>
			<!--选项卡-->
			<view class="nav">
				<block v-if="filterData[2]">
					<ren-dropdown-filter v-if="filterData[0].length>1" ref="child" :filterData='filterData' :defaultIndex='defaultIndexSub'
						@onSelected='onSelected'></ren-dropdown-filter>
				</block>
				<block v-else>
					<ren-dropdown-filter v-if="filterData[0].length>1" ref="child" :filterData='filterData' :defaultIndex='defaultIndex'
						@onSelected='onSelected'></ren-dropdown-filter>
				</block>
			</view>
		</view>
		<!--暂无数据-->
		<view style="width: 100%; height: 192rpx;"></view>
		<view class="nocontent" v-if="JSON.stringify(approvalData) == '{}'">
			<image src="/static/public/WSJ.png" class="wsjImg"></image>
			<view>暂无数据</view>
		</view>
		<!--待审批数据-->
		<view class="card" v-else>
		  <view class="card_item" v-for="item in approvalData" :key="item.id" :data-data-belongId ="item.belongId"
		   :data-id= "item.orderNumber" @click="goToReview(item.orderNumber)">
				<view class="first">
					<view class="text-left left-margin">{{item.orderNumber}}</view>
					<view class="text-right" v-if="item.offDay == 0">今天</view>
					<view class="text-right" v-if="item.offDay != 0">{{item.offDay}}天前</view>
					<view class="text-left update" v-if="item.markUpdate>0">
						<view class="updataText">待您更新</view>
					</view>
				</view>
				<view class="second">
					<view class="text-left">{{item.productName}}</view>
					<view class="text-right">
						<view class="text-num number" v-if="item.sumMoney == 0 && item.closeMoney == 0">{{item.sellMoney}}<text class="wanyuan"></text></view>
						<view class="text-num number" v-if="item.closeMoney != 0">{{item.closeMoney}}<text class="wanyuan"></text></view>
						<view class="text-num number" v-if="item.closeMoney == 0 && item.sumMoney != 0">{{item.sumMoney}}<text class="wanyuan">万</text></view>
						<view class="text-num">￥</view>
					</view>
					<view class="miaoshu">
						<view class="name">客户名称：{{item.basicBorrowerName}}</view>
						<view class="region">{{item.pledgeHouseAddress||""}}</view>
					</view>
				</view>
				<!-- 已审批 -->
				<view class="third" v-if="orderStatus == 2">
					<view class="text">本订单将在成功放款后核算提成</view>
				</view>
				<!-- 待审批 -->
				<view class="thirdd" v-if="orderStatus == 0 || orderStatus == 1">
					<view class="text">本订单将在成功放款后核算提成</view>
				</view>
				<!-- 中止 -->
				<view class="thirdz" v-if="orderStatus == 6">
					<view class="text">{{item.operationCause}}</view>
				</view>
				<!-- 已放款 -->
				<view class="thirdf" v-if="orderStatus == 4 && item.calculationState == 0">
					<view class="text">本订单将在成功放款后核算提成</view>
				</view>
				<view class="thirdf" v-if="orderStatus == 4 && item.calculationState == 1">
					<view class="text">提成已核算，您的提成为￥{{item.closeMoney}}</view>
				</view>
				<view class="thirdf" v-if="orderStatus == 4 && item.calculationState == 2">
					<view class="text">提成已发放，您的提成为￥{{item.closeMoney}}</view>
				</view>
		  </view>
		 
		</view>
		<!--待审批数据-->
		 <uni-load-more :status="status" v-if="pageNum > 1"/>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				//订单状态
				orderStatus: "",
				//产品id
				productId: "",
				//日期下拉选项
				dayIndex: "",
				//经纪人下拉选项
				agentId: "",
				approvalData:{},
				//当前页数
				pageNo:1,
				//查询条数
				pageSize: 30,
				//查询出来的总页数
				pageNum: 0,
				status: 'more',
				filterData:[
				    [{ text: '全部111', value: '' }],
				    [{ text: '近三个月', value: '近三个月', index:'0'},{ text: '近半年', value: "近半年", index:'1'}, 
					 { text: '近一年', value: "近一年", index:'2'},{ text: '全部', value: "全部",index:'3'}]
				],
				defaultIndex:[0, 0],
				defaultIndexSub :[0, 0, 0]
			}
		},
		onLoad(option) {
			this.orderStatus = option.id;
		},
		onShow() {
			this.getBaseInfor();
		},
		onHide() {
			let that = this;
			this.filterData[0] = [];
			if(that.userInfo.teamPartnerStatus == 1){
				that.defaultIndexSub = JSON.parse(JSON.stringify(that.$refs.child.selIndex)) 
			}else{
				that.defaultIndex = JSON.parse(JSON.stringify(that.$refs.child.selIndex))
			}
		},
		computed: {
			...mapState(["userInfo"]),
		},
		onReachBottom: function() {
			let pageNo = this.pageNo +1;
			if(pageNo<= this.pageNum){
				this.getMoreData(this.dayIndex, this.productId, this.agentId, pageNo);
			}else{
				this.status = "noMore"
			}
		},
		methods: {
			onSelected(res){
				if(this.userInfo.teamPartnerStatus == 1){
					this.agentId = res[2][0].id
				};
				this.dayIndex = res[1][0].index;
				this.productId = res[0][0].id;
				this.getIndexData(this.dayIndex, this.productId, this.agentId);
				this.ToTop();
			},
			//查看详情
			goToReview(orderNumber){
				uni.navigateTo({
				    url: "/pages/addOrder/reviewOrder?id=" +orderNumber
				});
			},
			//录入新单
			newOrderBtn() {
				uni.navigateTo({
				    url: "../addOrder/addOrder"
				});
			},
			//nav第一个分类选项
			selectTap: function () {
				this.show = !this.show;
			},
			optionTap :function(e) {
				let index = e.currentTarget.dataset.index;
				let id = e.currentTarget.dataset.id;
				this.productId = id;
				
				this.getIndexData(this.dayIndex, id, this.agentId);
				this.index = index;
				this.show = !this.show;
				this.ToTop();
			},
			//时间下拉菜单
			selectTap1: function () {
				this.show1 = !this.show1;
			},
			optionTap1 :function(e) {
				let index = e.currentTarget.dataset.index;
				this.dayIndex = index;
				this.getIndexData(index, this.productId, this.agentId);
				this.index1 = index;
				this.show1 = !this.show1;
				this.ToTop();
			},
			//经纪人分类
			selectTap2 :function () {
				this.show2 = !this.show2;
			},
			optionTap2 :function(e) {
				let index = e.currentTarget.dataset.index;
				let agentId = e.currentTarget.dataset.id;
				this.getIndexData(this.dayIndex, this.productId, agentId);
				this.index2 = index;
				this.agentId = agentId;
				this.show2 = !this.show2;
				this.ToTop();
			},
			//获取 产品类型，经纪人数据
			async getBaseInfor() {
				// 产品类型数据
				let resDataPro  = await this.$api.getProjectList()
				let arrList = JSON.parse(JSON.stringify(resDataPro.data.data));
				arrList.map((item, index) =>{
					item.text = item.productName ||item.phoneNumber
					item.index = index
				})
				this.projectList = [ { id: '', productName: '全部' }, ...arrList];
				this.filterData[0] = [ { id: '', text: '全部' }, ...arrList];
				
				if(this.userInfo.teamPartnerStatus == 1){
					// 获取全部经纪人数据
					let resData = await this.$api.getTeamTerm()
					let arr = JSON.parse(JSON.stringify(resData.data.data));
					arr.map( (item, index)=>{
						item.text = item.name
						item.index = index
					})
					this.teamTermList = [{ id: '', name: '全部经纪人' }, ...arr];
					this.filterData[2] = [{ id: '', text: '全部经纪人' }, ...arr];
			
					this.agentId = this.filterData[2][this.defaultIndexSub[2]].id;
					this.productId = this.filterData[0][this.defaultIndexSub[0]].id;
					this.dayIndex = this.filterData[1][this.defaultIndexSub[1]].index;
					
				}else{
					this.productId = this.filterData[0][this.defaultIndex[0]].id;
					this.dayIndex = this.filterData[1][this.defaultIndex[1]].index;
					
				}
				
				this.getIndexData(this.dayIndex, this.productId, this.agentId);
			},
			//获取订单数据
			getIndexData: function (dayIndex, productId, agentId) {
				if (!dayIndex) {
					dayIndex = 0
				}
				let query = {}
				query.dayIndex = dayIndex
				query.orderStatus = this.orderStatus
				query.productId = productId
				query.agentId = agentId
				if (!productId) {
					delete query.productId
				}
				if (!agentId) {
					delete query.agentId
				}
				this.$api.getOrderList(query).then(res=>{
					let data = res.data.data.records;
					if(data){
						this.approvalData = data;
						this.pageNo = res.data.data.current;
						this.pageNum = res.data.data.pages;
					}else{
						this.approvalData = {};
					}
				})
			},
			//获取更多订单
			getMoreData(dayIndex, productId, agentId, pageNo) {
				if (!dayIndex) {
					dayIndex = 0
				}
				let query = {};
				query.orderStatus = this.orderStatus;
				query.dayIndex = dayIndex;
				query.productId = productId;
				query.agentId = agentId;
				query.pageSize = this.pageSize;
				query.pageNo = pageNo;
				if (!productId) {
					delete query.productId
				}
				if (!agentId) {
					delete query.agentId
				}
				this.$api.getOrderList(query).then(res=>{
					let data = res.data.data.records;
					if(data){
						this.approvalData = this.approvalData.concat(data);
						this.pageNo = res.data.data.current;
						this.pageNum = res.data.data.pages;
					}
				})
			},
			//上拉刷新
			onPullDownRefresh() {
				this.getIndexData(this.dayIndex, this.productId, this.agentId);
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			ToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			}
		}
	}
</script>

<style scoped>
.top {
	width: 100%;
	position: fixed;
	height: 182rpx;
	left: 0;
	top:var(--window-top);
	z-index: 9;
}
.header {
	padding:20rpx 30rpx 10rpx 30rpx;
	background-color: #52aaf8;
	color: white;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
 }
.header .text-left {
	font-size: 18px;
	font-weight: Bold;
}
.header .text-right {
	font-size: 14px;
	border: 1px white solid;
	border-radius: 25px;
	padding: 4rpx 20rpx;
}
.nav {
	width: 100%;
	background-color: #52aaf8;
	color: white;
	position: relative;
	z-index: 99;
	height: 102rpx;
	font-size: 14px;
}
.nocontent {
  width: 100%;
  font-size: 15px;
  text-align: center;
  padding-top: 160rpx;
  color: #999999;
  line-height: 50px;
}
.wsjImg {
  width: 180px;
  height: 125px;
  margin: 0 auto;
}
.card {
	overflow: hidden;
	background-color: #f8f8f8;

}
.card_item{
	padding-top: 1px;
	overflow: hidden;
	margin: 10px 15px;
	border-radius: 2px;
	background-color: #fff;
}
.first {
  height: 2.4rem;
  padding: 20rpx 20rpx;
  font-size: 14px;
  color: rgb(176, 176, 176);
  border-bottom: 2px rgb(244, 244, 244) solid;
}

.first .text-left {
  float: left;
}

.first .text-right {
  float: right;
}
.first .update {
  width: 115rpx;
}
.left-margin {
  margin-right: 25rpx;
}
.update .updataText {
  color: #FF3347;
  border: 1px #FF3347 solid;
  text-align: center;
  font-size: 12px;
}
.second {
  padding: 40rpx 20rpx;
  min-height: 4.5rem;
}

.second .text-left {
  float: left;
  height: 55rpx;
  font-weight: Bold;
  font-size: 15px;
  color: #333333;
}
.text-left1 {
  float: left;
  font-size: 12px;
}
.update1 .updataText1 {
  color: white;
  text-align: center;
  font-size: 12px;
  margin-left: 15rpx;
  padding: 5rpx 15rpx;
  border-radius: 25rpx;
}
.second .text-right {
  float: right;
  width: 50%;
  line-height: 30rpx;
}

.text-num {
  float: right;
  font-size: 1;
}

.number {
  font-size: 20px;
  font-weight: Bold;
}

.miaoshu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  display: -webkit-flex;
}

.name {
  flex: 1;
  font-size: 12px;
  text-align: left;
}

.region {
  flex: 1;
  font-size: 12px;
  text-align: right;
  word-wrap: break-word;
}

.third {
  width: cal(100% - 40rpx);
  padding: 15rpx;
  margin: 0 20rpx 20rpx 20rpx;
  font-size: 12px;
  color: rgb(23, 173, 254);
  background-color: rgb(225, 244, 255);
  text-align: center;
}

.thirdd {
  width: cal(100% - 40rpx);
  padding: 15rpx;
  margin: 0 20rpx 20rpx 20rpx;
  font-size: 12px;
  color: #FE893B;
  background-color: #FFF3EB;
  text-align: center;
}

.thirdz {
  width: cal(100% - 40rpx);
  padding: 15rpx;
  margin: 0 20rpx 20rpx 20rpx;
  font-size: 12px;
  color: #999999;
  background-color: #F5F5F5;
  text-align: center;
}

.thirdf {
  width: cal(100% - 40rpx);
  padding: 15rpx;
  margin: 0 20rpx 20rpx 20rpx;
  font-size: 12px;
  color: #28B779;
  background-color: #E9F8F1;
  text-align: center;
}
.wanyuan {
  font-size: 12px;
  margin-left: 2rpx;
}
</style>
